<template>
  <div>
    我是comp1组件：{{ value }}
    <input type="text" v-model="value">
  </div>
</template>

<script>
export default {
  name: 'comp1'
}
</script>
<script setup>
import { ref, onActivated, onDeactivated } from 'vue'
const value = ref('')

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  console.log('onActivated被触发了')
})
onDeactivated(() => {
  // 在从 DOM 上移除，进入缓存
  // 以及组件卸载时调用
  console.log('onDeactivated被触发了')
})
// onActivated 在组织间挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用
</script>

<style scoped>

</style>